<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('首页')"/>
    <link rel="stylesheet" th:href="@{/admin/css/other/console1.css}"/>
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">今日订单数量/金额</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" style="display: flex; align-items: flex-start;">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value1"
                             style="color: #28333E;font-size: 20px">
                            0
                        </div>
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value2"
                             style="color: #28333E;font-size: 20px">
                            0
                        </div>

                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">

                            <img src="/admin/images/amount.svg" style="width: 50px;height: 50px;margin-top: -10px"  alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">本周订单数量/金额</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" style="display: flex; align-items: flex-start;">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value3"
                             style="color: #28333E;font-size: 20px">
                            0
                        </div>
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value4"
                             style="color: #28333E;font-size: 20px">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <img src="/admin/images/amount.svg" style="width: 50px;height: 50px;margin-top: -10px"  alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">本月订单数量/金额</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5" style="display: flex; align-items: flex-start;">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value5"
                             style="color: #28333E;font-size: 20px">
                            0
                        </div>

                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value6"
                             style="color: #28333E;font-size: 20px">
                            0
                        </div>

                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <img src="/admin/images/amount.svg" style="width: 50px;height: 50px;margin-top: -10px"  alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header" id="income-amount"></div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value7" style="color: #28333E;">
                            0
                        </div>

                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1739337871217" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="5056" width="200" height="200">
                                <path d="M954.8288 717.0048c-7.3728-135.424-88.2176-290.8672-241.152-367.4112 37.12-47.7696 57.2416-98.7648 62.72-135.68 10.6496-71.8336-71.68-118.3744-132.7616-92.7232-5.632 2.3552-12.1344 1.0752-16.2304-3.4304-70.144-76.9536-157.3888-52.5312-203.7248-0.4096-4.1984 4.7104-10.9568 6.0928-16.6912 3.4304-76.6464-35.6352-152.8832 21.9136-142.7968 90.368 8.0384 53.5552 32.4096 97.0752 63.3856 132.1472-121.4464 59.904-250.2144 175.2064-250.2144 394.752 0 117.5552 77.6704 201.9328 161.6384 201.9328h568.8832s158.8224-4.5056 146.944-222.976z"
                                      fill="#EC8827" p-id="5057"></path>
                                <path d="M910.1312 678.0928c-6.6048-118.1184-79.2064-253.696-216.576-320.4608 33.3312-41.6768 51.4048-86.1184 56.32-118.3232 9.5744-62.6688-64.3584-103.2704-119.1936-80.896-5.0688 2.048-10.8544 0.9728-14.592-2.9696-63.0272-67.1232-141.312-45.824-182.9376-0.3584-3.7888 4.096-9.8304 5.2736-15.0016 2.9696-68.8128-31.0784-137.3184 19.0976-128.256 78.848 7.2192 46.6944 29.0816 84.6336 56.9344 115.2512-109.056 52.2752-224.7168 152.7808-224.7168 344.32 0 102.5024 69.7344 176.128 145.152 176.128h510.8736s142.6944-3.9424 131.9936-194.5088z"
                                      fill="#EDA948" p-id="5058"></path>
                                <path d="M861.4912 644.4544c-5.7856-103.424-69.4272-222.208-189.7984-280.6784 29.2352-36.5056 45.056-75.4176 49.3568-103.6288 8.3968-54.8864-56.4224-90.4192-104.4992-70.8608-4.4544 1.792-9.5232 0.8192-12.7488-2.6112-55.2448-58.7776-123.8528-40.0896-160.3584-0.3072-3.328 3.584-8.6016 4.6592-13.1072 2.6112-60.3136-27.1872-120.32 16.7424-112.4352 69.0688 6.3488 40.9088 25.4976 74.1376 49.8688 100.9152C272.1792 404.6848 170.8544 492.7488 170.8544 660.48c0 89.8048 61.1328 154.2656 127.232 154.2656h447.7952s124.9792-3.3792 115.6096-170.2912z"
                                      fill="#F3BD50" p-id="5059"></path>
                                <path d="M416.4096 362.0352c-38.7072-29.3376-70.3488-68.5056-59.648-114.6368 13.056-33.9968 56.2176-33.3312 90.2144-17.664 24.1664-28.1088 85.6064-59.4944 152.9344-3.9424 41.1648-13.7216 81.7152-7.7824 87.6032 20.9408 3.584 17.5616-1.4848 39.0656-12.9536 60.8768C625.152 401.92 501.248 426.3424 416.4096 362.0352zM326.7072 768.9728h383.0272s91.4944-20.1728 78.4384-150.4768-180.0192-171.3664-271.7184-171.3664-266.8544 44.5952-266.8544 183.2448c-0.0512 122.624 77.1072 138.5984 77.1072 138.5984z"
                                      fill="#FFD071" p-id="5060"></path>
                                <path d="M698.2656 654.6432c19.6608-13.9776 32.4096-36.1472 32.4096-61.1328 0-29.1328-17.3568-54.528-42.8544-67.4304l12.032-11.264c15.4112-14.3872 23.9104-33.5872 24.0128-54.016 0.1024-20.4288-6.8096-40.704-21.1456-56.1152-36.4032-39.0144-85.3504-33.3824-117.0944-3.6864l-69.0176 59.392-72.4992-60.3136c-15.6672-14.1312-38.656-20.4288-60.3136-20.0192-21.6576 0.4608-40.1408 8.0896-55.1424 22.8864-15.0016 14.7456-22.272 38.8096-21.76 59.2384 0.512 20.4288 9.3696 39.4752 25.0368 53.6064l13.824 12.4416c-23.296 13.4656-38.8608 37.6832-38.8608 65.28 0 24.9344 12.7488 47.1552 32.4096 61.1328-19.6608 13.9776-32.4096 36.1472-32.4096 61.1328 0 42.1888 36.4032 76.4928 81.152 76.4928h49.6128v6.7584c0 42.1888 36.4032 76.4928 81.152 76.4928s81.152-34.304 81.152-76.4928v-6.7584h49.6128c44.7488 0 81.152-34.304 81.152-76.4928-0.1024-24.9344-12.8-47.1552-32.4608-61.1328z"
                                      fill="#EDA948" p-id="5061"></path>
                                <path d="M638.3616 654.6432h-60.7232v-0.8704h60.7232c32.4608 0 58.88-26.4192 58.88-58.88 0-30.3616-23.0912-55.3984-52.5824-58.5216l28.9792-28.7232c11.1616-11.0592 17.3568-25.8048 17.408-41.5744 0.0512-15.7184-5.9904-30.5664-17.0496-41.728-22.8864-23.04-60.2112-23.2448-83.2512-0.3584l-73.728 73.0624-77.1584-73.728c-23.4496-22.4256-60.8256-21.6064-83.2512 1.8432a58.71104 58.71104 0 0 0-16.3328 41.984c0.3584 15.7184 6.8096 30.3616 18.176 41.216l29.952 28.6208c-27.3408 5.0688-48.128 29.0816-48.128 57.9072 0 32.4608 26.4192 58.88 58.88 58.88h60.7232v0.8704H399.1552c-32.4608 0-58.88 26.4192-58.88 58.88s26.4192 58.88 58.88 58.88h60.7232v21.9136c0 32.4608 26.4192 58.88 58.88 58.88s58.88-26.4192 58.88-58.88v-21.9136h60.7232c32.4608 0 58.88-26.4192 58.88-58.88s-26.4192-58.88-58.88-58.88z"
                                      fill="#634FED" p-id="5062"></path>
                                <path d="M638.3616 682.8032h-88.8832V625.664h88.8832c16.9472 0 30.72-13.7728 30.72-30.72s-13.7728-30.72-30.72-30.72h-61.7984l77.2096-76.544a30.72 30.72 0 0 0 0.2048-43.4176 30.77632 30.77632 0 0 0-43.4688-0.2048l-93.184 92.3648-96.9216-92.7744c-12.288-11.7248-31.6928-11.3152-43.4176 0.9728s-11.3152 31.6928 0.9728 43.4176l79.616 76.1344h-58.368c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h88.8832v57.1904H399.1552c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h88.8832v50.0736c0 16.9472 13.7728 30.72 30.72 30.72s30.72-13.7728 30.72-30.72v-50.0736h88.8832c16.9472 0 30.72-13.7728 30.72-30.72s-13.7728-30.72-30.72-30.72z"
                                      fill="#7369F3" p-id="5063"></path>
                                <path d="M638.3616 698.1632h-104.2432V610.304h104.2432c8.4992 0 15.36-6.8608 15.36-15.36s-6.8608-15.36-15.36-15.36h-99.1232l103.7312-102.8096a15.3088 15.3088 0 0 0 0.1024-21.7088 15.36 15.36 0 0 0-21.7088-0.1024l-103.8336 102.912-107.776-103.1168a15.36 15.36 0 0 0-21.7088 0.4608 15.36 15.36 0 0 0 0.4608 21.7088l107.264 102.6048H399.1552c-8.4992 0-15.36 6.8608-15.36 15.36s6.8608 15.36 15.36 15.36h104.2432v87.9104H399.1552c-8.4992 0-15.36 6.8608-15.36 15.36s6.8608 15.36 15.36 15.36h104.2432v65.4336c0 8.4992 6.8608 15.36 15.36 15.36s15.36-6.8608 15.36-15.36v-65.4336h104.2432c8.4992 0 15.36-6.8608 15.36-15.36s-6.8608-15.36-15.36-15.36z"
                                      fill="#9292FF" p-id="5064"></path>
                                <path d="M522.9056 355.7376c-53.3504 0-91.5456-28.16-93.952-29.952a28.81536 28.81536 0 0 1-5.632-40.3456c9.5232-12.6464 27.4944-15.1552 40.192-5.7344 2.6112 1.8944 56.832 40.2944 117.6576-0.768a28.7744 28.7744 0 0 1 39.9872 7.7824c8.9088 13.1584 5.4272 31.0784-7.7312 39.9872-32.3072 21.76-63.3856 29.0304-90.5216 29.0304z"
                                      fill="#FFE4B3" p-id="5065"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records1"
                             style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">系统公告</div>
                <div class="layui-card-body">
                    <ul class="list">

                    </ul>
                </div>
            </div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/admin/js/axios.min.js}"></script>
<script th:src="@{/admin/js/requests.js}"></script>
<script th:src="@{/admin/api/notice.js}"></script>
<script th:inline="javascript">
    layui.use(['layer', 'echarts', 'element', 'count', 'topBar', 'jquery'], function () {
        let count = layui.count;
        let echarts = layui.echarts;
        let username = localStorage.getItem("username");
        if (username == 'admin') {
            $('#income-amount').text("本月预计应发金额")
        } else {
            $('#income-amount').text("本月预计提成金额")
        }


        $.ajax({
            url: '/sys/stats/homeStats',
            dataType: 'json',
            async: false,
            type: 'get',
            success: (result) => {
                if (result.success) {
                    count.up("value1", {
                        time: 4000,
                        num: result.data.todayOrderCount,
                        bit: 2,
                        regulator: 50
                    })

                    count.up("value2", {
                        time: 4000,
                        num: result.data.todayOrderAmount,
                        bit: 2,
                        regulator: 50
                    })

                    count.up("value3", {
                        time: 4000,
                        num: result.data.thisWeekOrderCount,
                        bit: 2,
                        regulator: 50
                    })

                    count.up("value4", {
                        time: 4000,
                        bit: 2,
                        num: result.data.thisWeekOrderAmount,
                        regulator: 50
                    })

                    count.up("value5", {
                        time: 4000,
                        num: result.data.thisMonthOrderCount,
                        bit: 2,
                        regulator: 50
                    })

                    count.up("value6", {
                        time: 4000,
                        num: result.data.thisMonthOrderAmount,
                        bit: 2,
                        regulator: 50
                    })

                    count.up("value7", {
                        time: 4000,
                        num: result.data.thisMonthCommissionAmount,
                        bit: 2,
                        regulator: 50
                    })

                }
            }
        })


        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var echartsRecords1 = echarts.init(document.getElementById('echarts-records1'), 'walden');


        $.ajax({
            url: '/sys/stats/getOrderCountByDateRange',
            dataType: 'json',
            async: false,
            type: 'get',
            success: (result) => {
                if (result.success) {
                    // Prepare arrays for xAxis and data
                    var dates = [];
                    var orderCounts = [];
                    var orderAmounts = [];

                    // Map the result data to the format we need for ECharts
                    result.data.forEach(item => {
                        dates.push(item.date);
                        orderCounts.push(item.orderCount);
                        orderAmounts.push(item.orderAmount);
                    });

                    // Define the ECharts option with mapped data
                    var option = {
                        title: {
                            text: '最近7日订单',  // Title text
                            left: 'center',      // Title alignment
                            textStyle: {
                                color: '#969696',   // Title color
                                fontSize: 18      // Title font size
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: [{
                            type: 'category',
                            data: dates,  // Use the formatted date strings
                            name: '日期',  // X-axis title
                            nameTextStyle: {
                                color: '#999',  // X-axis title color
                                fontSize: 14     // X-axis title font size
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#999"
                                }
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitNumber: 4,
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#DDD'
                                }
                            },
                            name: '订单数量',  // Y-axis title
                            nameTextStyle: {
                                color: '#999',  // Y-axis title color
                                fontSize: 14     // Y-axis title font size
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#333"
                                },
                            },
                            nameTextStyle: {
                                color: "#999"
                            },
                            splitArea: {
                                show: false
                            }
                        }],
                        series: [{
                            name: '订单数量',
                            type: 'line',
                            data: orderCounts,  // Use the order counts
                            lineStyle: {
                                normal: {
                                    width: 4,
                                    color: {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: '#A9F387' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#48D8BF' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(72,216,191, 0.3)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#fff',
                                    borderWidth: 10,
                                    borderColor: "#A9F387"
                                }
                            },
                            smooth: true
                        }]
                    };
                    var option1 = {
                        title: {
                            text: '最近7日营业额',  // Title text
                            left: 'center',      // Title alignment
                            textStyle: {
                                color: '#969696',   // Title color
                                fontSize: 18      // Title font size
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: [{
                            type: 'category',
                            data: dates,  // Use the formatted date strings
                            name: '日期',  // X-axis title
                            nameTextStyle: {
                                color: '#999',  // X-axis title color
                                fontSize: 14     // X-axis title font size
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#999"
                                }
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitNumber: 4,
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#DDD'
                                }
                            },
                            name: '营业额',  // Y-axis title
                            nameTextStyle: {
                                color: '#999',  // Y-axis title color
                                fontSize: 14     // Y-axis title font size
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#333"
                                },
                            },
                            nameTextStyle: {
                                color: "#999"
                            },
                            splitArea: {
                                show: false
                            }
                        }],
                        series: [{
                            name: '订单数量',
                            type: 'bar',
                            data: orderAmounts,  // Use the order counts
                            lineStyle: {
                                normal: {
                                    width: 1,
                                    color: {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: '#36b368' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#48D8BF' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(72,216,191, 0.3)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#fff',
                                    borderWidth: 5,
                                    borderColor: "#36b368"
                                }
                            },
                            smooth: true
                        }]
                    };

                    // Apply the option to your ECharts instance
                    echartsRecords.setOption(option);
                    echartsRecords1.setOption(option1);
                }
            }
        });


        $.ajax({
            url: '/sys/stats/getOrderAmountByDateRange',
            dataType: 'json',
            async: false,
            type: 'get',
            success: (result) => {
                if (result.success) {
                    // Prepare arrays for xAxis and data
                    var dates = [];
                    var orderCounts = [];

                    // Map the result data to the format we need for ECharts
                    result.data.forEach(item => {
                        dates.push(item.date);
                        orderCounts.push(item.orderAmount);
                    });

                    // Define the ECharts option with mapped data
                    var option = {
                        title: {
                            text: '最近7营业额',  // Title text
                            left: 'center',      // Title alignment
                            textStyle: {
                                color: '#969696',   // Title color
                                fontSize: 18      // Title font size
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: [{
                            type: 'category',
                            data: dates,  // Use the formatted date strings
                            name: '日期',  // X-axis title
                            nameTextStyle: {
                                color: '#999',  // X-axis title color
                                fontSize: 14     // X-axis title font size
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#999"
                                }
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitNumber: 4,
                            splitLine: {
                                lineStyle: {
                                    type: 'dashed',
                                    color: '#DDD'
                                }
                            },
                            name: '营业额',  // Y-axis title
                            nameTextStyle: {
                                color: '#999',  // Y-axis title color
                                fontSize: 14     // Y-axis title font size
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: "#333"
                                },
                            },
                            nameTextStyle: {
                                color: "#999"
                            },
                            splitArea: {
                                show: false
                            }
                        }],
                        series: [{
                            name: '订单数量',
                            type: 'line',
                            data: orderCounts,  // Use the order counts
                            lineStyle: {
                                normal: {
                                    width: 4,
                                    color: {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: '#A9F387' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#48D8BF' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(72,216,191, 0.3)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#fff',
                                    borderWidth: 10,
                                    borderColor: "#A9F387"
                                }
                            },
                            smooth: true
                        }]
                    };

                    // Apply the option to your ECharts instance
                    echartsRecords.setOption(option);
                    echartsRecords1.setOption(option);
                }
            }
        });

        listNoticeApi().then(res => {
            console.log(res.data)
            const listContainer = document.querySelector('.list');  // 获取 ul 元素
            const notices = res.data;  // 假设返回的数据是通知数组

            // 清空现有的 list 内容
            listContainer.innerHTML = '';

            // 遍历通知数组并动态生成 li 元素
            notices.forEach(notice => {
                const li = document.createElement('li');

                // 直接通过 className 设置多个类名
                li.className = 'list-item';  // 一次性设置多个类

                // 创建标题部分
                const titleSpan = document.createElement('span');
                titleSpan.className = 'title';
                titleSpan.textContent = notice.title;  // 填充标题

                // 创建日期部分
                const footerSpan = document.createElement('span');
                footerSpan.className = 'footer';
                footerSpan.textContent = notice.createTime;  // 填充日期

                // 将 title 和 footer 添加到 li 中
                li.appendChild(titleSpan);
                li.appendChild(footerSpan);

                // 将 li 添加到 ul 中
                listContainer.appendChild(li);
            });
        })


        window.onresize = function () {
            echartsRecords.resize();
        }
    });
</script>
</body>
</html>
